<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	.box{
		width: 300px;
		height: 300px;
		background: #99D9EA;
	}
	</style>
</head>
<body>

<div class="box" id="box">
	
</div>

<script type="text/javascript">
	var box = document.getElementById('box')     //定义变量，用DIV的ID取整个DIV，使其作为对象
	var width = parseInt(getComputedStyle(box).width)  //捉去div的宽，作为对象  
	var height = parseInt(getComputedStyle(box).height)  ////捉去div的高，作为对象


	var c= 0; 					//定义一个中间值，变量C，初始赋值为0.



	function run(){					//功能模块    函数运行



		if (width<200){				//当宽小于200px;   c赋值为0
			c=0;
		}

		if (height>600){			//当高大于600时；  c赋值为1;
			c=1;
		}

		if (c==0) {			//当c等于0时，  （== 等于）   （= 赋值）
			width  +=5		//宽+5px;
			height +=5		//高 +5px;   运行到此，因c=0，宽高每次加5px;   当宽高大于600时

		}else{	 			//接上，当宽高大于600px;时，执行第二条命令，c的值为1，此时执行下面命令，宽高每次减5px;  当宽小于200时，又执行第一条命令。。以此循环  
			width -=5;				
			height -=5;

		}

		box.style.width = width+"px";							//定义宽高的单位
		box.style.height= height+"px";


	}


	var time = setInterval(run, 10);				//定时器函数

	box.onmouseover = function (argument) {		//触发事件。 onmouseover:当鼠标移到对象时触发
		clearInterval(time);					//（鼠标移到对象时）取消函数设定的定时操作
	}


	box.onmouseout = function (argument) {		//触发事件。  onmouseout：鼠标移出
		time = setInterval(run, 10);			//(鼠标移出对象时)   继续执行定时器
	}



</script>
	
</body>
</html>